<template>
  <Page name="额度审核">
    <div class="reject">
      <div class="con">
        <div class="header">
          <ul>
            <li>
              <p class="title">现有额度</p>
              <p>{{data.current_amount}}</p>
            </li>
            <li>
              <p class="title">申请至额度</p>
              <p>{{data.apply_amount}}</p>
            </li>
          </ul>
          <p class="title">申请原因</p>
          <p>{{data.reasson}}</p>
          <p class="title" v-if="data.sub_type!=-1">额度性质</p>
          <p v-if="data.sub_type!=-1">{{data.sub_type==0 ? '共享' :'独享'}}</p>
        </div>
        <div class="radio" v-if="data.sub_type==-1">
          <h4>设定额度性质</h4>
          <ul>
            <li @click="checked(0)" :class="idx==0?'on':''">独享</li>
            <li @click="checked(1)" :class="idx==1?'on':''">共享</li>
          </ul>
          <p v-if="data.type==1">您自己的额度性质为共享，只能给下线选择共享</p>
        </div>
        <div class="amount">
          <h4>最终审核额度</h4>
          <div class="form-group">
            <input type="text" v-model="amount" @input="check" placeholder="请输入最终审核额度">
          </div>
          <p>
            独享代表此下线将独享您设定的额度，您的当前额度将变小，共
            享代表下线与您共享您设定的额度，您的当前额度保持不变
          </p>
        </div>
      </div>
      <div class="btn-wrap">
        <a
          class="btn btn-block btn-primary submit"
          :disabled="disabled"
          @click="submit($event)"
        >同意审核</a>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from "~/components/page";

export default {
  components: {
    Page
  },
  data() {
    return {
      idx: 0,
      amount: "",
      disabled: true,
      data: {}
    };
  },
  methods: {
    check() {
      if (this.amount != "") {
        this.disabled = false;
      }
      if (this.amount > parseInt(this.data.max_amount)) {
        this.amount = this.data.max_amount;
      }
      this.amount = this.amount.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.amount = this.amount.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.amount = this.amount
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.amount = this.amount.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (this.amount.indexOf(".") < 0 && this.amount != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        this.amount = parseFloat(this.amount);
      }
    },
    checked(type) {
      if (this.data.type == 1) return;
      this.idx = type;
    },
    async submit() {
      if (this.amount == "") {
        this.$toast("请输入最终审核额度");
        return false;
      }
      let { data: rs } = await this.$axios.post("?ct=api&ac=agree_apply", {
        bill_id: this.$utils.getUrlKey("bill_id"),
        amount: this.amount,
        type: this.idx
      });
      if (rs.code == 0) {
        if (this.$utils.getUrlKey("from") == "leshell") {
          this.$router.push({ path: "/wealth" });
        } else {
          this.$router.push({ path: "/credit" });
        }
        this.$toast(rs.msg);
      } else {
        this.$toast(rs.msg);
      }
    },
    async getDate() {
      let { data: rs } = await this.$axios.post("?ct=api&ac=agree_apply_data", {
        bill_id: this.$utils.getUrlKey("bill_id")
      });
      if (rs.code == 0) {
        this.data = rs.data;
        if (this.data.sub_type == -1) {
          this.idx = rs.data.type;
        } else {
          this.idx = rs.data.sub_type;
        }
      } else {
        this.$toast(rs.msg);
        window.history.go(-1);
      }
    }
  },
  mounted() {
    this.getDate();
  }
};
</script>

<style lang="less" scoped>
.reject {
  margin-top: 20px;
  .con {
    .header {
      width: 690px;
      margin: 20px auto;
      background: #fff;
      border-radius: 4px;
      padding: 30px;
      ul {
        li {
          float: left;
          width: 50%;
        }
      }
      p {
        font-size: 30px;
        color: #292929;
        margin-bottom: 20px;
      }
      p.title {
        font-size: 24px;
        color: #999;
        margin-bottom: 20px;
      }
    }
    .amount {
      background: #fff;
      padding: 0 30px;
      margin-top: 20px;
      h4 {
        line-height: 80px;
        font-size: 30px;
        font-weight: normal;
      }
      p {
        color: #d39b00;
        line-height: 80px;
        border-top: 1px solid #ededed;
        font-size: 28px;
        line-height: 40px;
        padding-bottom: 20px;
        padding-top: 20px;
      }
      div {
        padding: 20px 0;
        font-size: 60px;
        overflow: hidden;
        width: 100%;
        input {
          font-size: 60px;
          width: 100%;
        }
        input::-webkit-input-placeholder {
          font-size: 30px;
        }
      }
    }
    .radio {
      background: #fff;
      padding: 0 30px;
      h4 {
        line-height: 80px;
        font-size: 30px;
        font-weight: normal;
      }
      p {
        color: #d39b00;
        line-height: 80px;
        border-top: 1px solid #ededed;
        font-size: 28px;
      }
      ul {
        overflow: hidden;
        padding: 30px 0 40px;

        li {
          float: left;
          font-size: 30px;
          color: #999;
          margin-right: 80px;
          padding-left: 54px;
          position: relative;
          line-height: 36px;
          &.on {
            color: #292929;
          }
          &:last-child {
            margin-right: 0;
          }
          &:after {
            content: "";
            width: 36px;
            height: 36px;
            position: absolute;
            left: 0;
            top: 0;
            border: 2px solid #bec2cc;
            border-radius: 36px;
          }
          &.on:after {
            content: "";
            width: 36px;
            height: 36px;
            position: absolute;
            left: 0;
            top: 0;
            border: 2px solid #2086f9;
            border-radius: 36px;
          }
          &.on::before {
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            left: 10px;
            top: 10px;
            background: #2086f9;
            border-radius: 16px;
          }
        }
      }
    }
  }
  .btn-wrap {
    padding: 30px 30px;
    margin-top: 30px;
  }
}
</style>
